<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是会议详情界面</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
    <script src="js/echarts.min.js"></script>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }

        .box-card {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>文章详情</h2>
    <el-card class="box-card">
        <!--            头部-->
        <div slot="header" class="clearfix" style="text-align: center;">
            <span style="font-size: 20px;">关于《协同会议平台》项目部分模块功能升级</span>
            <el-button type="danger" style="float: right;">参加会议</el-button>
        </div>

        <!--            中间-->
        <el-card class="box-card">
            <div  class="text item">
                <h3>部门：
                    <span>研发部</span>
                </h3>

                <h3>应到：
                    <span>10人</span>
                </h3>

                <h3>实到：
                    <span>9人</span>
                </h3>

                <h3>未到：
                    <span>1人</span>
                </h3>

            </div>

            <!--                留言框-->
            <el-form ref="form" :model="form" label-width="80px">
                <!-- 修改点：添加了:rows="4"和min-height样式 -->
                <el-input type="textarea" v-model="form.desc" :rows="6" style="min-height: 150px;"></el-input>
            </el-form>

        </el-card>

        <!--            尾部-->
        <hr style="margin-top: 15px;margin-bottom: 10px;">
        <div style="margin-top: 22px;"></div>
        <div class="footer" style="float: right;text-align: right;">
            <small style="font-size: 15px;">开始时间：2025-1-1 10:00</small>
            <div style="margin-top: 22px;"></div>
            <small style="font-size: 15px;">时间：2025-1-1 12:00</small>
            <br>
            <br>
        </div>

    </el-card>
</div>

<script>
    new Vue({
        el:"#box",
        data:{
            form: {
                desc: '' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,' +
                    '协同会议平台有如下模块需要升级,协同会议平台有如下模块需要升级,，'
            }
        },
        methods:{
            // 表单提交
            onSubmit() {
                console.log('submit!');
            }
        }

    })
</script>
</body>
</html>